<template>
    <div id="sign-token-container">
        <div class="sign-token-info">
            <img src="/img/QRcode.png" class="sign-token-qrcode" alt="">
            <div class="sign-token-box">
                {{$store.state.view.token.token}}
                <div class="sign-token-rateline"></div>
            </div>
            <div class="sign-state-tips">
                {{$store.state.view.token.tips}}
            </div>
        </div>
        <Token_Onduty/>
    </div>
</template>

<script>

import local_script from "@/assets/scripts/util";
import client_request from "@/axios/client";
import Token_Onduty from "@sign/vue/token-onduty";
import $ from "jquery";

export default {
    data() {
        return {
            tokenTimer: null,
            rateTimer: null
        }
    },
    created() {
        let that = this;
        if (!that.$store.state.view.token.start && local_script.isAdministrator()) {
            that.$store.state.view.token.start = true;
            that.getToken();
            that.tokenTimer = setInterval(() => {
                that.getToken();
            }, 10000);
        } else if (!local_script.isAdministrator()) {
            this.token = "------";
            this.tips = "请用办公室设备打开此页面"
        }
    },
    methods: {
        async getToken() {
            let width = 0;
            clearInterval(this.rateTimer);
            this.rateTimer = setInterval(() => $('.sign-token-rateline').width(width++), 33)
            let res = await client_request.axiosToken();
            this.$store.state.view.token.token = res.token;
            this.$store.state.view.token.tips = res.tips;
            this.$store.state.view.token.duty_list = res.dutyList;
        }
    },
    components: {
        Token_Onduty
    }
}
</script>

<style lang="scss">
@import "@sign/scss/token-index.scss";
</style>